<template>
	<view class="content">
		<u--textarea v-model="value1" placeholder="请详细描述您的问题和意见" count maxlength="200"></u--textarea>

		<view class="addbox">
			<view class="img">
				<view v-for="(item, i) in tempFilePaths" :key="i" style="position: relative">
					<image :class="[(i + 1) % 4 === 0 ? 'noMargin' : '']" :src="item" @click="previewImage(i)" mode=""></image>
					<image :class="[(i + 1) % 4 === 0 ? 'noMargindel' : '']" class="del" src="@/static/mains/del.png" mode="" @click="delImg(i)"></image>
				</view>
				<view class="upload" @click="upload"><text>{{tempFilePaths.length}}/5</text></view>
			</view>
		</view>

		<!-- <view>
			<img src="@/static/mains/add.png" alt="">
		</view> -->

		<view class="title">反馈类型</view>
		<view class="choose">
			<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
				<u-radio :customStyle="{ marginRight: '20px' }" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.value"></u-radio>
			</u-radio-group>
		</view>
		<view class="btn" @click="submit">
			<u-button text="提交" color="linear-gradient(to right, rgb(6,137,215), rgb(8,129,205))"></u-button>
		</view>
	</view>
</template>

<script>
import { uploadFile } from '@/utils/tools';
import config from "@/config/index.js";
const imgUrl = config.imgUrl;
export default {
	data() {
		return {
			value1: '',
			radiolist1: [
				// {
				// 	value: 1,
				// 	name: '售后',
				// 	disabled: false
				// },
				// {
				// 	value: 2,
				// 	name: '建议',
				// 	disabled: false
				// },
				// {
				// 	value: 3,
				// 	name: '购买',
				// 	disabled: false
				// },
				// {
				// 	value: 4,
				// 	name: '咨询',
				// 	disabled: false
				// }
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '',
			tempFilePaths: [
				// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
				// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
				// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
				// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
				// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png'
			]
		};
	},
	async onLoad() {
		let res = await this.$api.getdict({type:"task_type"});
		if(res.code == 1){
			// console.log(res)
			this.radiolist1 = res.data.task_type;
		}
	},
	methods: {
		// 上传
		upload() {
			var that = this;
			uni.chooseImage({
				count: 5, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function (res) {
					let list = [];
					let count = 0;
					let files = res.tempFilePaths;
					uni.showLoading();
					files.forEach((item) => {
						uploadFile(item, {
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
							}
						})
							.then((res) => {
								uni.hideLoading();
								count++;
								//如果是最后一张,则隐藏等待中
								if (count == files.length) {
									wx.hideLoading();
								}
								// console.log(res,'1111');
								// this.avatar = res;
								list.push(res); //待上传图片临时路径
								that.tempFilePaths = list;
							})
							.catch(() => {
								uni.hideLoading();
								uni.showToast({
									title: '上传失败,请重新上传!',
									icon: 'none'
								});
							});
					});
				}
			});
		},
		// 删除
		delImg(i) {
			this.tempFilePaths.splice(i, 1);
		},
		// 预览
		previewImage: function (index) {
			let imgs = [];
			for (let i = 0; i < this.tempFilePaths.length; i++) {
				let str = this.tempFilePaths[i];
				imgs.push(str);
			}
			uni.previewImage({
				current: index, //预览图片的下标
				urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			});
		},
		groupChange(n) {
			console.log('groupChange', n);
			this.radiovalue1 = n;
		},
		async submit(){
			let imgs = [];
			if(this.tempFilePaths.length>0){
				this.tempFilePaths.forEach((item) => {
					imgs.push(item.split(imgUrl)[1])
				})
			}
			// console.log(imgs)
			// return
			if(!this.value1){
				uni.showToast({
					title:'请输入问题和意见',
					icon:'none'
				})
				return
			}
			if(!this.radiovalue1){
				uni.showToast({
					title:'请选择反馈类型',
					icon:'none'
				})
				return
			}
			let params ={
				content:this.value1,
				type:this.radiovalue1,
				images:imgs.toString()
			}
			let res = await this.$api.feedback(params);
			if(res.code == 1){
				// console.log(res)
				uni.showToast({
					title:'反馈成功'
				})
				setTimeout(function(){
					uni.navigateBack()
				},800)
			}
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	padding: 35rpx 20rpx;

	.addbox {
		border: 2rpx solid #dedede;
		margin: 25rpx 0;
		margin-bottom: 100rpx;
		border-radius: 25rpx;

		.img {
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			padding:20rpx 30rpx 0 30rpx;
			border-radius: 25rpx;
			.del {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: -20rpx;
				right: -20rpx;
			}
		}

		image {
			width: 140rpx;
			height: 140rpx;
			margin-bottom: 20rpx;
			margin-right: 26rpx;
		}

		.noMargin {
			margin-right: 0rpx;
		}

		.noMargindel {
			top: -20rpx !important;
			right: -44rpx !important;
		}

		.upload {
			width: 140rpx;
			height: 140rpx;
			background: url(@/static/mains/add.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			position: relative;
			
			text{
				position: absolute;
				right: 9rpx;
				bottom: 9rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #CBCBCB;
			}
		}
	}

	.title {
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 30rpx 20rpx;
	}
	.choose {
		background: #fff;
		padding: 26rpx 40rpx;
		border-radius: 10rpx;
		margin-top: 17rpx;
		border: 2rpx solid #dedede;
	}
	.btn {
		margin: 120rpx 20rpx 0 20rpx;
	}
}
</style>
